import React, { useState } from 'react';
import { CloseOutlined } from '@ant-design/icons';
import { ProjectType } from '../../types';
import { addProject, tryMsg } from '../../service';
import { notification } from 'antd';

interface ProjectAddProps {
  visible: boolean;
  onFlush: (flush:boolean) => void;
  onClose: () => void;
}

const ProjectAdd: React.FC<ProjectAddProps> = ({ visible, onClose,onFlush: onClush }) => {
  const [projectName, setProjectName] = useState('');
  const [projectDescription, setProjectDescription] = useState('');
  const [config, setConfig] = useState(''); // 默认配置内容

  const handleSubmit =  async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log('保存项目：', { projectName, projectDescription, config });
    // 这里可以添加保存逻辑
    let project:ProjectType = {name:projectName,description:projectDescription,config:config}

    try {
        let rsp = await addProject(project)
        notification.success({message:"保存成功！"})      
        onClush(true)
    } catch (error) {
        onClush(false)
        notification.error({message:"保存失败！"+error.message})      
        return false
    }

  };

  if (!visible) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white p-6 rounded-lg shadow-lg w-1/2 md:w-2/3 lg:w-1/2 relative">
        <div className="flex justify-between items-center mb-4">
          <h3 className="text-lg font-semibold">新建项目</h3>
          <CloseOutlined
            className="cursor-pointer text-gray-500 hover:text-gray-700"
            onClick={onClose}
          />
        </div>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              项目名称
            </label>
            <input
              type="text"
              value={projectName}
              onChange={(e) => setProjectName(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring focus:border-blue-300"
              placeholder="请输入项目名称"
              required
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              项目描述
            </label>
            <textarea
              value={projectDescription}
              onChange={(e) => setProjectDescription(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring focus:border-blue-300"
              rows={3} // 项目描述调整为 3 行
              placeholder="请输入项目描述"
            ></textarea>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              默认配置
            </label>
            <textarea
              name="config"
              value={config}
              onChange={(e) => setConfig(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring focus:border-blue-300"
              rows={4}
              placeholder="请输入默认配置内容"
            ></textarea>
          </div>
          
          <div className="flex justify-end">
            <button
              type="submit"
              className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring focus:border-blue-300"
            >
              保存
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default ProjectAdd;